<template>
  <div class="workflow-start-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="工作流名称">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入工作流名称"
              clearable
              style="width: 200px"
              @keyup.enter="handleSearch"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch" :icon="Search">
              搜索
            </el-button>
            <el-button @click="handleReset" :icon="RefreshRight">
              重置
            </el-button>
            <el-button @click="handleRefresh" :icon="Refresh">
              刷新
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 工作流列表 -->
    <div class="workflow-list-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <span class="card-title">可用工作流</span>
            <span class="workflow-count">共 {{ total }} 个工作流</span>
          </div>
        </template>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="5" animated />
        </div>

        <!-- 工作流卡片列表 -->
        <div v-else-if="workflowList.length > 0" class="workflow-grid">
          <div
            v-for="workflow in workflowList"
            :key="workflow.id"
            class="workflow-card"
            @click="handleStartWorkflow(workflow)"
          >
            <div class="card-content">
              <div class="workflow-icon">
                <el-icon :size="24" color="#409eff">
                  <Document />
                </el-icon>
              </div>
              <div class="workflow-info">
                <h3 class="workflow-name">
                  {{ workflow.basicInfo.name }}
                </h3>
                <p class="workflow-description">{{ workflow.basicInfo.description || '暂无描述' }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="暂无可用的工作流">
            <el-button type="primary" @click="handleRefresh">
              刷新列表
            </el-button>
          </el-empty>
        </div>

        <!-- 分页 -->
        <div v-if="total > 0" class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 启动工作流弹窗 -->
    <WorkflowStartDialog
      v-model:visible="startDialogVisible"
      :workflow="selectedWorkflow"
      @success="handleStartSuccess"
    />


  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search,
  RefreshRight,
  Refresh,
  Document,
} from '@element-plus/icons-vue'
import WorkflowStartDialog from './components/WorkflowStartDialog.vue'
import { getWorkflowPage } from '/@/api/workflow'
import type { WorkflowConfiguration } from './types'

// 响应式数据
const loading = ref(false)
const workflowList = ref<WorkflowConfiguration[]>([])
const total = ref(0)
const startDialogVisible = ref(false)
const selectedWorkflow = ref<WorkflowConfiguration | null>(null)

// 搜索表单
const searchForm = reactive({
  name: ''
})

// 分页
const pagination = reactive({
  page: 1,
  size: 20
})

// 方法
const fetchWorkflowList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      name: searchForm.name
    }
    
    const response = await getWorkflowPage(params)
    workflowList.value = response.data.records || []
    total.value = response.data.total || 0
  } catch (error) {
    ElMessage.error('获取工作流列表失败')
    console.error('获取工作流列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  fetchWorkflowList()
}

const handleReset = () => {
  searchForm.name = ''
  pagination.page = 1
  fetchWorkflowList()
}

const handleRefresh = () => {
  fetchWorkflowList()
}

const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.page = 1
  fetchWorkflowList()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchWorkflowList()
}

const handleStartWorkflow = (workflow: WorkflowConfiguration) => {
  selectedWorkflow.value = workflow
  startDialogVisible.value = true
}

const handleStartSuccess = () => {
  ElMessage.success('工作流启动成功')
  startDialogVisible.value = false
  // 可以在这里添加跳转到工作流实例页面的逻辑
}

// 生命周期
onMounted(() => {
  fetchWorkflowList()
})
</script>

<style scoped>
.workflow-start-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.search-container {
  margin-bottom: 20px;
}

.workflow-list-container {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.workflow-count {
  color: #909399;
  font-size: 14px;
}

.loading-container {
  padding: 20px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.workflow-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.workflow-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.workflow-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.workflow-info {
  flex: 1;
  text-align: center;
  margin-bottom: 16px;
}

.workflow-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}

.workflow-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.version {
  color: #909399;
  font-size: 12px;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.empty-state {
  padding: 40px 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

@media (max-width: 768px) {
  .workflow-start-container {
    padding: 12px;
  }

  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .pagination-container {
    :deep(.el-pagination) {
      justify-content: center;
      flex-wrap: wrap;
    }
  }
}
</style>